<template>
    <custom-form
      ref="custom-form"
      class="custom-form"
      v-model="currentRow"
      :FormList="FormList"
      mode="edit"
      v-bind="formItemLayout"
      layout="horizontal"
    >
      <template slot="file-upload" slot-scope="{ params }">
        <a-button class="upload-button" :loading="loading">
          <input type="file" accept="image/*" @change="(e) => handlerChangeUpload(e, params)" />
          {{ !image ? '点击' : '重新'}}上传文件
        </a-button>
        <template v-if="image">
          <div class="preview">
            <img :src="image" alt="">
          </div>
        </template>
      </template>
    </custom-form>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'
import CustomForm from '@/components/src/Form'
import Upload from '@/components/src/Upload'
import { userModule } from '@/store/modules/user'
import { largeMemberServices } from '@/common/services/largeMember'
import { read } from 'store/storages/cookieStorage'

@Component({
  components: {
    CustomForm,
    Upload
  },
})
export default class AdminList extends Mixins(
  EventsMixin,
  TableMixin,
  AuthMixin
) {

  @Prop({
    type: String
  })
  public currentLargeMemberId!: string

  public formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 17 },
  }

  public currentAreaId = ''
  public currentTab = ''
  public FormList = [
    {
      title: '申报表照片',
      key: 'big_mb_img',
      dataIndex: 'show_area',
      width: 80,
      form: {
        type: 'upload',
        isShowList: false,
        slot: 'file-upload',
      },
    },
  ]

  public image = ''
  public loading = false

  @Watch('currentLargeMemberId', { immediate: true })
  public handlerCurrentUserIdChange() {
    largeMemberServices.getImages({
      big_mb_id: this.currentLargeMemberId
    }).then(_ => {
      this.image = _.data.big_mb_img
    })
  }

  public handleUploadImageSubmit() {

  }

  public handlerChangeUpload(e: Event, params: Record<string, string>) {
    // @ts-ignore
    const files = e.target.files
    const size = 10;
    if (files[0].size > size * 1024 * 1024) {
      this.$message.error(`文件大小不能超过${size}M`)
      return
    }
    // this.file = files[0]
    // params.file_name = this.file?.name || ''
    this.image = window.URL.createObjectURL(files[0])
    const reader = new FileReader()
    reader.onload = () => {
      console.log(reader.result)
      this.loading = true
      largeMemberServices.updateImages({
        big_mb_id: this.currentLargeMemberId,
        big_mb_img: reader.result as string
      }).then(_ => {
        this.$message.success('上传成功')
      }).finally(() => {
        this.loading = false
      })
    }
    reader.readAsDataURL(files[0])

    // @ts-ignore
    e.target.value = null
  }
}
</script>

<style scoped lang="less">
// 审核表专用样式
/deep/ .review-form {
  padding-top: 20px;
}
.preview {
  width: 200px;
  img {
    width: 100%;
  }
}
</style>
